<template>
  <div>
    <Row :gutter="20" class="margin-bottom-20">
      <i-col span="14">
        <area-selector
          :gutter="20"
          ref="areaSelector"
          :province.sync="form.province"
          :city.sync="form.city"
          :district.sync="form.district"
        ></area-selector>
      </i-col>
      <i-col span="10">
        <Tooltip content="输入地址搜索时请勿加省/市/区" placement="top-start" class="ivu-tip-block">
          <i-input
            icon="ios-search-strong"
            placeholder="关键字：房源地址/小区/房源编号"
            @on-enter="handleChange"
            @on-click="handleChange"
            v-model.trim="form.keyword">
          </i-input>
        </Tooltip>
      </i-col>
    </Row>

    <Row :gutter="20" class="margin-bottom-20">
      <i-col span="14">
        <Row :gutter="20" class="margin-bottom-20">
          <i-col span="8">
            <Select
              clearable
              v-model="form.home_type"
              placeholder="公寓类型"
              @on-change="handleChange">
              <Option :value="0">全部</Option>
              <Option :value="1">分散式</Option>
              <Option :value="2">集中式</Option>
            </Select>
          </i-col>
          <i-col span="8">
            <BranchSelector v-model="form.branch_id" @on-change="handleBranchChange" :show-head="!userHasBranchs" />
          </i-col>
          <i-col span="8">
            <ButlerSelector v-if="!canNotShowButlers" v-model="form.user_id" :branchId="form.branch_id" @on-change="handleChange" />
          </i-col>
        </Row>
      </i-col>
    </Row>

  </div>
</template>

<script>
import dataCenter from '@/libs/dataCenter'
import areaSelector from './areaSelector.vue'
import BranchSelector from '@/components/selector/branch-selector'
import ButlerSelector from '@/components/selector/butler-selector'

/**
 * 房源搜索栏
    <search-component
        @search="handleSearch"></search-component>
    search 回调值: {
        province
        city
        district
        keyword
        branch_id
        home_type
    }
 */
export default {
  name: 'c-search-bar',
  components: {
    areaSelector,
    BranchSelector,
    ButlerSelector
  },
  data () {
    return {
      provinces: [],
      form: {
        province: '',
        city: '',
        district: '',
        keyword: '',
        home_type: '',
        branch_id: '',
        user_id: ''
      },
      open: false
    }
  },
  computed: {
    canNotShowButlers () {
      const { roleId } = this.$store.state.user
      return roleId === 104 || roleId === 103 // 财务103也不行
    },
    userHasBranchs () {
      const { branches } = this.$store.state.user
      return !!branches.length
    }
  },
  created () {
    this.fetchProvinces()
  },
  methods: {
    fetchProvinces () {
      dataCenter.getProvinces(this, (res, err) => {
        this.provinces = res
      })
    },
    handleBranchChange () {
      this.form.user_id = ''
      this.handleChange()
    },
    handleChange () {
      const { province, city, district, keyword, home_type, branch_id, user_id } = this.form
      const tag = district || city || province || null
      const params = {
        tag,
        keyword,
        home_type: home_type === 0 ? '' : home_type,
        branch_id,
        user_id
      }
      this.$emit('search', params)
    },
    search () {
      this.$emit('search')
    },
    handleOpen () {
      this.open = !this.open
    }
  }
}
</script>

<style lang="less">
.c-search {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 20px;
    padding: 22px 30px 7px;
    background-color: #fff;
    .type {
        font-weight: 700;
    }
    &-label {
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 15px;
    }
    &-item {
        width: 100px;
        display: inline-block;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    &-collapse {
        height: 37px;
        overflow: hidden;
        &.is-open {
            height: auto;
        }
    }

    &-tool {
        position: absolute;
        top: -10px;
        right: 10px;
        padding: 10px;
        color: #05bac5;
        font-size: 19px;
        cursor: pointer;
        &:hover {
            color: #00dce8;
        }

        & .icon-svg {
            transform-origin: center center;
            transition: transform 0.3s;
        }

        & .icon-svg.is-open {
            transform: rotate(180deg);
        }
    }

    & .ivu-radio-group {
        font-size: 0;
    }
}
</style>